<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <h3 class="panel-title">生产进度可视化</h3>
    </div>

    <div class="panel-body">
        <!-- 实时数据卡片 -->
        <div class="row" id="realtime-cards">
            <div class="col-md-3">
                <div class="info-box">
                    <span class="info-box-icon bg-aqua"><i class="fa fa-shopping-cart"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">今日报工数量</span>
                        <span class="info-box-number">
                            <?= $realTime['quantity'] ?>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box">
                    <span class="info-box-icon bg-green"><i class="fa fa-money"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">今日工资总额</span>
                        <span class="info-box-number">
                            <?= $realTime['wage'] ?>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box">
                    <span class="info-box-icon bg-yellow"><i class="fa fa-tasks"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">进行中任务</span>
                        <span class="info-box-number">
                            <?= $realTime['tasks'] ?>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box">
                    <span class="info-box-icon bg-red"><i class="fa fa-clock-o"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">待确认报工</span>
                        <span class="info-box-number">
                            <?= $realTime['pending'] ?>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="row">
            <!-- 订单进度饼图 -->
            <div class="col-md-6">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">订单状态分布</h3>
                    </div>
                    <div class="box-body">
                        <div id="order-status-chart" style="height: 300px;"></div>
                    </div>
                </div>
            </div>

            <!-- 员工工作量柱状图 -->
            <div class="col-md-6">
                <div class="box box-success">
                    <div class="box-header with-border">
                        <h3 class="box-title">今日员工工作量</h3>
                    </div>
                    <div class="box-body">
                        <div id="worker-stats-chart" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 日报工趋势图 -->
            <div class="col-md-8">
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">日报工趋势</h3>
                        <div class="box-tools pull-right">
                            <div class="form-inline">
                                <input type="date" class="form-control input-sm" id="trend-start-date" value="{:date('Y-m-01')}">
                                <span> 至 </span>
                                <input type="date" class="form-control input-sm" id="trend-end-date" value="{:date('Y-m-d')}">
                                <button class="btn btn-sm btn-primary" id="trend-search">查询</button>
                            </div>
                        </div>
                    </div>
                    <div class="box-body">
                        <div id="daily-trend-chart" style="height: 300px;"></div>
                    </div>
                </div>
            </div>

            <!-- 工序效率饼图 -->
            <div class="col-md-4">
                <div class="box box-warning">
                    <div class="box-header with-border">
                        <h3 class="box-title">工序效率统计</h3>
                    </div>
                    <div class="box-body">
                        <div id="process-stats-chart" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 订单进度表格 -->
        <div class="row">
            <div class="col-md-12">
                <div class="box box-default">
                    <div class="box-header with-border">
                        <h3 class="box-title">订单进度详情</h3>
                    </div>
                    <div class="box-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped" id="order-progress-table">
                                <thead>
                                    <tr>
                                        <th>订单号</th>
                                        <th>客户名称</th>
                                        <th>总数量</th>
                                        <th>进度</th>
                                        <th>状态</th>
                                        <th>创建时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php 
                                    foreach ($orders as $order):
                                        $progress = $order['progress'] ?? 0;
                                        $statusText = '';
                                        switch($order['status']) {
                                            case 0: $statusText = '<span class="text-primary">待生产</span>'; break;
                                            case 1: $statusText = '<span class="text-warning">生产中</span>'; break;
                                            case 2: $statusText = '<span class="text-success">已完成</span>'; break;
                                            default: $statusText = $order['status'];
                                        }
                                    ?>
                                    <tr>
                                        <td><?= $order['order_no'] ?></td>
                                        <td><?= $order['customer_name'] ?></td>
                                        <td><?= $order['total_quantity'] ?></td>
                                        <td>
                                            <div class="progress progress-xs">
                                                 <div class="progress-bar progress-bar-success" style="width: <?php echo $progress; ?>%;"></div>
                                             </div>
                                            <?= $progress ?>%
                                        </td>
                                        <td><?= $statusText ?></td>
                                        <td><?= date('Y-m-d', $order['createtime']) ?></td>
                                    </tr>
                                    <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>